<template>
  <CartChild :list="list" :total="total" @changeNum="changeNum" @del="del"/>
</template>

<script>
import CartChild from './CartChild.vue';
export default {
    components:{
        CartChild
    },
    data() {
    return {
      list: [
        { name: "苹果", price: 10, num: 1, id: 0 },
        { name: "香蕉", price: 5, num: 4, id: 1 },
        { name: "梨子", price: 8, num: 5, id: 2 },
        { name: "橘子", price: 14, num: 7, id: 3 },
        { name: "西瓜", price: 20, num: 3, id: 4 },
        { name: "车厘子", price: 50, num: 2, id: 5 },
      ],
    };
  },
  methods: {
    changeNum(n, id) {
      for (let item of this.list) {
        if (item.id == id) {
          item.num += n;
          break;
        }
      }
    },
    del(id) {
      this.list = this.list.filter((item) => item.id !== id);
    },
  },
  computed: {
    total() {
      // let t=0;
      // for( let item of this.list){
      //     t+=item.price*item.num
      // }
      // return t;
      let t = this.list.reduce((d, v) => {
        return v.price * v.num + d;
      }, 0);
      return t;
    },
  },
};


</script>

<style>
</style>